<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <input v-model="message" type="text" placeholder="852" />
        <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
        {{message}}
        <!-- 表单提交key都是name value是1或者2  -->
        <input type="radio" id="" value="1" v-model="gender">男
        <input type="radio" id="" value="2" v-model="gender">女

        <input type="checkbox" value="0" v-model="checkedBall">足球
        <input type="checkbox" value="1" v-model="checkedBall">篮球
        <input type="checkbox" value="2" v-model="checkedBall">羽毛球
        <input type="checkbox" v-model='isAgree'> 同意协议
        <button :disabled="!isAgree">下一步</button>
        <input type="password" name="" id="" v-model="password">
        <p>{{password}}</p>
        {{password}}
        <label :for="item.value" v-for="(item, index) in options" :key="index"><input type="checkbox" :id="item.value" :value="item.value" v-model="ball">{{item.text}}</label>
        <select name="" id=""v-model="ball">
            <option v-for="(item, index) in options" :key="index" :value="item.value">{{item.text}}</option>
        </select>
        <!-- lazy修饰符在文本框失去焦点或回车，data才更新。 -->
       <label for="txt">measage<input type="text" v-model.lazy="message" id="txt"></label>
       <h3>{{message}}</h3>
       <!-- 文本框输入的都是string类型。导致data里面的数据也变为string类型。 v-model.number将用户的输入值转为数值类型。这样data里面也是number类型-->
       <label for="age"><input type="text" id="age" v-model.number="age"></label>
       <h3>{{typeof age}}-{{age}}</h3>
       <!-- 去文本左右空格 -->
       <label for="msg">message<input type="text" v-model.trim="message" id="msg"></label>
       <h3>{{message}}-{{message.length}}</h3>

        

    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    message: 123465,
                    gender: '1',
                    checkedBall: ["2"],
                    isAgree: false,
                    password: "1346",
                    options: [
                        { value: 1, text: "足球" },
                        { value: 2, text: "篮球" },
                        { value: 3, text: "橄榄球" },
                    ],
                    ball:"1",
                    age:10

                }
            },
        })

    </script>
</body>

</html>